<!DOCTYPE html>
<html>
<head th:include="cultivateWeb/header :: culHeaderCss"></head>

<body ><!--onbeforeunload="return goAway()"-->
<!-- 顶部导航 -->
<header th:include="cultivateWeb/header :: header"></header>
<link type="text/css" href="/css/cultivateWeb/style/course.css" rel="stylesheet">
<link type="text/css" href="/lib/vide7.5.5/css/video-js.min.css" rel="stylesheet">
<style>
    .xianshi span {
        color: #fff
    }

    .title_1 {
        color: #333;
        font-size: 14px;
        font-weight: 700;
    }

    p {
        font-size: 14px
    }
</style>
<div style="background-color: #f7f7f7; ">
    <div class="layui-container">
        <input th:value="${id}" type="hidden" id="resourceId"/>
        <input th:value="${chapterId}" type="hidden" id="chapterId"/>
        <input th:value="${courseId}" type="hidden" id="courseId"/>
         <input  type="hidden" id="isMyCourse"/>

        <p style="line-height: 40px">当前位置：<a href="/cultivate/homepage">首页</a> > <a href="/cultivate/study/studyOnline">在线学习</a>
            > 章节学习</p>
    </div>
    <section>
        <div class="layui-container bt50">
            <!--<input type="hidden" id="name" th:value="${name}" />-->
            <div class="xianshi" style="font-size: 20px;margin-bottom: 10px">
            </div>
            <div id="intro" style="width: 1170px;margin: auto"></div>
            <div class="div_2">
                <div style="height: 50px">
                    <span class="span_3 active1">视频课程</span>
                    <span class="span_3">配套资源</span>
                </div>
                <hr style="margin: auto"/>
                <!-- 视频课程 -->
                <div style="font-size: 14px; margin:30px" id="chapterList">
                </div>

                <!-- 配套资源 -->
                <div style="font-size: 14px; margin:30px;display: none" id="extendList">
                </div>
            </div>
        </div>

    </section>
</div>
<div id="createCode" style="display: none">
    <div style="margin-top: 40px;text-align:center">
        <input placeholder="请输入验证码" id="code"/><span class="getSmsCodeBtn"></span> <span class='right'
                                                                                         style="cursor: pointer"
                                                                                         onclick='createCode()'>换一张</span>
    </div>
</div>
<!-- footer ------------------------------------------------------- -->
<div class="footer" th:include="cultivateWeb/header :: footer"></div>
</body>
<script src="/lib/vide7.5.5/js/video.min.js"></script>
<script>
    $(function () {
        $(".span_3").click(function () {
            $(this).addClass("active1");
            $(this).siblings().removeClass("active1");
            if ($(this).text() == '视频课程') {
                $("#chapterList").show();
                $('#extendList').hide();
            }else if ($(this).text() == '配套资源'){
                $("#chapterList").hide();
                $('#extendList').show();
            }
        });
        selExtendList();
        selChapterList();
    });
    //设置中文
    videojs.addLanguage('zh-CN', {
        "Play": "播放",
        "Pause": "暂停",
        "Current Time": "当前时间",
        "Duration": "时长",
        "Remaining Time": "剩余时间",
        "Stream Type": "媒体流类型",
        "LIVE": "直播",
        "Loaded": "加载完毕",
        "Progress": "进度",
        "Fullscreen": "全屏",
        "Non-Fullscreen": "退出全屏",
        "Mute": "静音",
        "Unmute": "取消静音",
        "Playback Rate": "播放速度",
        "Subtitles": "字幕",
        "subtitles off": "关闭字幕",
        "Captions": "内嵌字幕",
        "captions off": "关闭内嵌字幕",
        "Chapters": "节目段落",
        "Close Modal Dialog": "关闭弹窗",
        "Descriptions": "描述",
        "descriptions off": "关闭描述",
        "Audio Track": "音轨",
        "You aborted the media playback": "视频播放被终止",
        "A network error caused the media download to fail part-way.": "网络错误导致视频下载中途失败。",
        "The media could not be loaded, either because the server or network failed or because the format is not supported.": "视频因格式不支持或者服务器或网络的问题无法加载。",
        "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "由于视频文件损坏或是该视频使用了你的浏览器不支持的功能，播放终止。",
        "No compatible source was found for this media.": "无法找到此视频兼容的源。",
        "The media is encrypted and we do not have the keys to decrypt it.": "视频已加密，无法解密。",
        "Play Video": "播放视频",
        "Close": "关闭",
        "Modal Window": "弹窗",
        "This is a modal window": "这是一个弹窗",
        "This modal can be closed by pressing the Escape key or activating the close button.": "可以按ESC按键或启用关闭按钮来关闭此弹窗。",
        ", opens captions settings dialog": ", 开启标题设置弹窗",
        ", opens subtitles settings dialog": ", 开启字幕设置弹窗",
        ", opens descriptions settings dialog": ", 开启描述设置弹窗",
        ", selected": ", 选择",
        "captions settings": "字幕设定",
        "Audio Player": "音频播放器",
        "Video Player": "视频播放器",
        "Replay": "重播",
        "Progress Bar": "进度小节",
        "Volume Level": "音量",
        "subtitles settings": "字幕设定",
        "descriptions settings": "描述设定",
        "Text": "文字",
        "White": "白",
        "Black": "黑",
        "Red": "红",
        "Green": "绿",
        "Blue": "蓝",
        "Yellow": "黄",
        "Magenta": "紫红",
        "Cyan": "青",
        "Background": "背景",
        "Window": "视窗",
        "Transparent": "透明",
        "Semi-Transparent": "半透明",
        "Opaque": "不透明",
        "Font Size": "字体尺寸",
        "Text Edge Style": "字体边缘样式",
        "None": "无",
        "Raised": "浮雕",
        "Depressed": "压低",
        "Uniform": "均匀",
        "Dropshadow": "下阴影",
        "Font Family": "字体库",
        "Proportional Sans-Serif": "比例无细体",
        "Monospace Sans-Serif": "单间隔无细体",
        "Proportional Serif": "比例细体",
        "Monospace Serif": "单间隔细体",
        "Casual": "舒适",
        "Script": "手写体",
        "Small Caps": "小型大写字体",
        "Reset": "重启",
        "restore all settings to the default values": "恢复全部设定至预设值",
        "Done": "完成",
        "Caption Settings Dialog": "字幕设定视窗",
        "Beginning of dialog window. Escape will cancel and close the window.": "开始对话视窗。离开会取消及关闭视窗",
        "End of dialog window.": "结束对话视窗"
    });
    var myPlayer = '';
    var startTime = formatTime(new Date());
    //获取资源数据
    getData();
    //获取章节列表
    selChapterList();
    //获取配套资源
    selExtendList();

    function getData() {
        //判断用户是否购买课程
           ajaxToken("/jzApi/courses/selIsMyCourse", 'GET',
            {
                courseId: $("#courseId").val()
            }, function (res) {
               $("#isMyCourse").val(res.isMyCourse);
            }
        );
    //      $.ajax({
    //     url: "/jzApi/courses/selChapterDetails",
    //     type: 'GET',
    //     data: {
    //             id: $("#chapterId").val()
    //         },
    //     success: function (res) {
    //             if (res == '') {
    //                 $("#course").html('<div class="noData">暂无数据</div>');
    //             } else {
    //                 if (res.code == 40025 || res.code == 40022) {
    //                     layer.confirm("您暂未报名此课程，请报名后重试！", {
    //                         closeBtn: 0,
    //                         btn: ['返回'],
    //                         yes: function (index, layero) {
    //                             window.history.back(-1);
    //                         }
    //                     });
    //                     return false
    //                 }
                    
    //                 var intro = '';
    //                 var xianshi = '';
    //                 var a = false;
                    
    //                 intro += '<input type="hidden" id="isFree" value="' + res.data.isFree + '" /><h1 style="font-size: 20px;margin-bottom: 10px">章节名称：' + res.data.name + '</h1><p style="color: #666"><span class="title_1">章节描述：</span>' + res.data.introduce + '</p><p style="color: #666;margin-top: 10px"><span class="title_1">最短学习时长：</span>' + res.data.minTime + '分钟</p>';
    //                 res.data.traRes.forEach(function (item, index) {
    //                     if (item.type == 1) {
    //                         a = true;
    //                         xianshi += '<video id="my-video" class="video-js vjs-big-play-centered" controls preload="auto" width="1170" height="600" data-setup="{}">' +
    //                             '<source src="' + item.fileRoute + '" type="video/mp4">' +
    //                             '<source src="' + item.fileRoute + '" type="video/webm">' +
    //                             '<source src="' + item.fileRoute + '" type="video/ogg">' +
    //                             '</video>'
    //                     } else {
    //                         xianshi += '<div>课件下载：<a download href="' + item.fileRoute + '" style="text-decoration: underline;color: #005C34">' + item.name + '</a></div>'
    //                     }
    //                 });
    //                 $(".xianshi").html(xianshi);
    //                 $("#intro").html(intro);
    //                 if (a) {
    //                     myPlayer = videojs('my-video');
    //                     videojs("my-video").ready(function () {
    //                         var myPlayer = this;
    //                         myPlayer.play()
    //                     });
    //                 }

    //             }
    //         }
    // });
        ajaxToken("/jzApi/courses/selChapterDetails", 'GET',
            {
                id: $("#resourceId").val(),
                chapterId:$("#chapterId").val()
            }, function (res) {
                if (res == '') {
                    $("#course").html('<div class="noData">暂无数据</div>');
                } else {
                    if (res.code == 40025 || res.code == 40022) {
                        layer.confirm("您暂未报名此课程，请报名后重试！", {
                            closeBtn: 0,
                            btn: ['返回'],
                            yes: function (index, layero) {
                                window.history.back(-1);
                            }
                        });
                        return false
                    }
                    
                    var intro = '';
                    var xianshi = '';
                    var a = false;
                        if ( res.traRes.type == 1) {
                            intro += '<input type="hidden" id="isFree" value="' + res.isFree + '" /><h1 style="font-size: 20px;margin-bottom: 10px">视频名称：' + res.traRes.name + '</h1><p style="color: #666"><span class="title_1">章节描述：</span>' + res.introduce + '</p><p style="color: #666;margin-top: 10px"><span class="title_1">最短学习时长：</span>' + res.minTime + '分钟</p>';
                            a = true;
                            xianshi += '<video id="my-video" class="video-js vjs-big-play-centered" controls preload="auto" width="1170" height="600" data-setup="{}">' +
                                '<source src="' + res.traRes.fileRoute + '" type="video/mp4">' +
                                '<source src="' + res.traRes.fileRoute + '" type="video/webm">' +
                                '<source src="' + res.traRes.fileRoute + '" type="video/ogg">' +
                                '</video>'
                        } else {
                            xianshi += '<div>资源下载：<a download href="' + res.traRes.fileRoute + '" style="text-decoration: underline;color: #005C34">' + res.traRes.name + '</a></div>'
                        }
                    $(".xianshi").html(xianshi);
                    $("#intro").html(intro);
                    if (a) {
                        myPlayer = videojs('my-video');
                        videojs("my-video").ready(function () {
                            var myPlayer = this;
                            myPlayer.play()
                        });
                    }

                }
            }
        )
    }

    //验证码
    function createCode() {
        var code;
        //首先默认code为空字符串
        code = '';
        //设置验证码长度
        var codeLength = 4;
        //设置随机字符
        var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
        //循环codeLength
        for (var i = 0; i < codeLength; i++) {
            //设置随机数范围,这设置为0 ~ 36
            var index = Math.floor(Math.random() * 36);
            //字符串拼接 将每次随机的字符进行拼接
            code += random[index];
        }
        //将拼接好的字符串赋值给展示的code
        $(".getSmsCodeBtn").text(code);
        return code
    }

    var second = 0;
    nzbg("0");

    function nzbg(obj) {
        second++;
        if (second != 0) {
            if (second % 300 == 0) {
                myPlayer.pause();
                nzbg("1");
                createCode();
                layer.open({
                    title: '学习打卡',
                    closeBtn: 0,
                    type: 1,
                    area: ['420px', '240px'],
                    content: $("#createCode"),
                    btn: ['确定'],
                    yes: function (index, layero) {
                        if ($("#code").val().toUpperCase() != $(".getSmsCodeBtn").text().toUpperCase()) {
                            layer.msg("验证码错误");
                            return false
                        }
                        layer.close(index);
                        $("#code").val("");
                        myPlayer.play();
                        nzbg("0");
                    }
                });
            }
        }
        //开始计时
        if (obj == "0") {
            nz_bg = window.setInterval("nzbg()", 1000);
        }
        //暂停计时
        if (obj == "1") {
            nz_bg = window.clearInterval(nz_bg);
        }
        
    }
    离开页面或刷新页面提交学习记录
    function goAway() {
        //根据课程判断用户是否购买此课程，0为是则需要记录学习情况，试听试看则不用
                if ( $("#isMyCourse").val() == 0) {
                    ajaxToken("/jzApi/learns/addLearns", 'GET',
                        {
                            chapterId: $("#chapterId").val(),
                            times: second,
                            startTime: startTime.replace(/\//g, "-"),
                            endTime: formatTime(new Date()).replace(/\//g, "-")
                        }, function (res) {
                        }
                    )
               }
    }
    //解决火狐离开页面或刷新页面不兼容问题
    $(window).bind('beforeunload',function() {});

    function selChapterList() {
        $.ajax({
            url: "/jzApi/courses/selChapterList",
            type: 'GET',
            data: {id: $("#courseId").val()},
            success: function (res) {
                if (res.data == 0) {
                    $("#chapterList").html('<div class="noData">暂无数据</div>');
                } else {
                    var list = res.data;
                    var categoryList = '';
                    list.forEach(function (item, index) {
                        var resourceList = item.resources;
                        var resourceListStr='<div class="list"><span class="chapterTitle">'+item.name+'</span>';
                        var a = '';
                        if (item.isFree==0) {
                            a='<text style="color:#005c34">(可试看)</text>'
                        }
                        resourceList.forEach(function (item2,index2){
                            resourceListStr+='<div class="chapter"><a href="/cultivate/study/studyChapter?id=' + item2.id +'&chapterId='+item2.chapterId+ '&courseId=' + $("#courseId").val() + '">' +
                            '<div class="cpt"></div>' +
                            '<span class="cpt">' + item2.name +'</span class="cpt">' +
                            '<span class="min">' + a+ item2.videoDuration + '</span>' +
                            '<div style="clear: both"></div></a></div>';
                        });
                        categoryList += resourceListStr+'</div>';
                    });
                    $("#chapterList").html(categoryList);
                }
            }
        });
    }

    function selExtendList() {
        $.ajax({
            url: "/jzApi/courses/selExtendList",
            type: 'GET',
            data: {id: $("#courseId").val()},
            success: function (res) {
                if (res.data == 0) {
                    $("#extendList").html('<div class="noData">暂无数据</div>');
                } else {
                    var list = res.data;
                    var categoryList = '';
                    list.forEach(function (item, index) {
                        var resourceList = item.resources;
                        
                        var resourceListStr='<div class="list"><span class="chapterTitle">'+item.name+'</span>';
                        var a = '';
                        if (item.isFree==0) {
                            a='<text style="color:#005c34">(可试看)</text>'
                        }
                        if(resourceList.length>0){
                            resourceList.forEach(function (item2,index2){
                                resourceListStr+='<div class="chapter"><a href="/cultivate/study/studyChapter?id=' + item2.id +'&chapterId='+item2.chapterId+ '&courseId=' + $("#courseId").val() + '">' +
                            '<div class="cpt"></div>' +
                            '<span class="cpt">' + item2.name +'</span class="cpt">' +
                            '<span class="min">' + a+ item2.videoDuration + '</span>' +
                            '<div style="clear: both"></div></a></div>';
                            });
                        }else{
                            resourceListStr+='<div class="chapter"><div class="noData">暂无数据</div></div>';
                        }
                        categoryList += resourceListStr+'</div>';
                        
                    });
                    $("#extendList").html(categoryList);
                }
            }
        });
    }
</script>

</html>